<template>
    <div>
        <navigationDiv></navigationDiv>
        <div id="page-wrapper" class="gray-bg">
            <topDiv></topDiv>
            <transition enter-active-class="animated bounceInLeft">
                <router-view></router-view>
            </transition>
            <footerDiv></footerDiv>
        </div>
    </div>
</template>

<script>
    import topDiv from './common/topnavbar.vue'
    import navigationDiv from './common/navigation.vue'
    import footerDiv from './common/footer.vue'

    function fix_height() {
        var _$body = document.getElementsByTagName('body')[0];
        var navbarHeigh = $('nav.navbar-default').height();
        var wrapperHeigh = $('#page-wrapper').height();

        if (navbarHeigh > wrapperHeigh) {
            $('#page-wrapper').css("min-height", navbarHeigh + "px");
        }

        if (navbarHeigh < wrapperHeigh) {
            $('#page-wrapper').css("min-height", $(window).height() + "px");
        }

        if ($('body').hasClass('fixed-nav')) {
            if (navbarHeigh > wrapperHeigh) {
                $('#page-wrapper').css("min-height", navbarHeigh - 90 + "px");
            } else {
                $('#page-wrapper').css("min-height", $(window).height() - 90 + "px");
            }
        }

        if (_$body.clientWidth < 769) {
            _$body.setAttribute('class', 'body-small mini-navbar')
        } else {
            _$body.setAttribute('class', 'mini-navbar')
        }
    }

    $(window).bind("resize scroll", function () {
        if (!$("body").hasClass('body-small')) {
            fix_height();
        }
    });


    export default {
        components: {
            'footerDiv': footerDiv,
            'navigationDiv': navigationDiv,
            'topDiv': topDiv,

        },
        data() {
            return {
                msg: "this index .vue"
            }
        },
        methods: {
            initStyle: function () {

            }
        },
        mounted() {
            this.$nextTick(() => {
                fix_height()
            })
            this.initStyle()

        }
    }
</script>